<template>
  <el-select v-model="content" placeholder="请选择宿舍楼" @change="onChange" filterable :style="style">
    <el-option v-for="dict in buildingList" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
  </el-select>
</template>

<script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
import { listBuilding, getBuilding, delBuilding, addBuilding, updateBuilding } from '@/api/dormitory/building';
import { BuildingVO, BuildingQuery, BuildingForm } from '@/api/dormitory/building/types';

const props = defineProps({
  modelValue: propTypes.string || propTypes.number || undefined,
  style: {
    type: Object,
    default: () => {
      return { width: '240px' };
    }
  }
  // width: propTypes.string.def("240") || propTypes.number.def(240)
});

const buildingList = ref<BuildingVO[]>([]);
const queryParams = reactive<BuildingQuery>({
  pageNum: 1,
  pageSize: 10000,
  nodeId: undefined,
  name: undefined,
  type: undefined,
  code: undefined,
  orderNum: undefined,
  turnstiles: undefined,
  turnstilesText: undefined,
  cameras: undefined,
  cameraText: undefined,
  workers: undefined,
  workerText: undefined,
  floorCount: undefined,
  roomCount: undefined,
  roomMemberCount: undefined
});

const content = ref('');
watch(
  () => props.modelValue,
  (v) => {
    if (v != content.value) {
      content.value = v;
    }
  },
  { immediate: true }
);

const emit = defineEmits(['change', 'update:modelValue']);

const onChange = (data: any) => {
  emit('change', data);
  emit('update:modelValue', data);
};

/** 查询宿舍楼列表 */
const getList = async () => {
  const res = await listBuilding(queryParams.value);
  buildingList.value = res.rows;
};

const clear = () => {
  content.value = undefined;
  emit('update:modelValue', content.value);
};

onMounted(() => {
  getList();
});
</script>

<style scoped></style>
